import React, { useEffect, useState } from 'react'
import Item from './Item'
import PubSub from 'pubsub-js'
export default function List() {
  //初始化一个state  保存订阅回来的数据 订阅到了数据 数据改变  要重新渲染
  const [searchList, setSearchList] = useState({ isInit: true, isSearch: false, data: [] });
  //初始化订阅  
  useEffect(() => {
    PubSub.subscribe("github", (_, data) => {
      //订阅到的数据
      console.log(data);
      //订阅到的了值 要重新渲染页面
      //要头像 data.data.items 是一个数组
      setSearchList(data)
    })
  }, [])

  /* 
  新需求：
  当查找数据是 显示 正在查找中ing 提升（列表渲染）
  
  */

  return (
    <div className="row">
      {
        searchList.isInit ? <h2>请开始搜索</h2 > :
          searchList.isSearch ? <h2>正在搜索中....</h2> :
            searchList.data.map(item => {
              return <Item key={item.id} {...item} />
            })
      }

    </div>
  )
}
